<template>
  <section class="detail-tpl-wrapper">
    <appear-item
      :item="[{label: '活动名称', value: data.name},
            {label: '活动编号', value: data.no}]"
    ></appear-item>
    <appear-item
      :item="[{label: '活动类型', value: data.typeName},
            {label: '活动开始时间', value: formatDate(data.startTime)}]"
    ></appear-item>
    <appear-item
      :item="[{label: '活动结束时间', value: formatDate(data.endTime)},
            {label: '活动地点', value: data.address}]"
    ></appear-item>
    <appear-item
      :item="[{label: '活动邀约人数', value: data.invitePeopleNum}]"
    ></appear-item>
    <appear-item
      :item="[{label: '活动简介', value: data.summary}]"
    ></appear-item>
    <appear-item
      :item="[{label: '活动内容', value: data.content, type: 'editor'}]"
    ></appear-item>
    <appear-item
      :item="[{label: '图片', value: data.pictureUrl, type: 'image'}]"
    ></appear-item>
    <appear-item
      :item="[{label: '视频'}]"
      style="margin-bottom: 5px;"
    >
    </appear-item>
    <div class="video-wrapper">
      <div v-for="item in data.videos" :key="item.fileUrl">
        <a target="_blank" :href="item.fileUrl">{{item.fileName}}</a>
      </div>
    </div>
    <appear-item
      :item="[{label: '活动所属部门', value: data.deptName},{label: '活动负责人', value: data.managerName}]"
    ></appear-item>
    <appear-item
      :item="[{label: '可见范围配置'}]"
      style="margin-bottom: 5px;"
    >
    </appear-item>

    <div class="scope-show-wrapper" v-if="data.scope === 0 || data.scope === -3">
      <div class="scope-wrapper">
        <span>内部理财顾问:</span><p>{{faData}}</p>
      </div>
      <div class="scope-wrapper">
        <span>独立理财顾问:</span><p>{{ifaData}}</p>
      </div>
      <div class="scope-wrapper">
        <span>客户:</span><p>{{customerData}}</p>
      </div>
    </div>
    <template v-if="data.scope === -1">
      <span class="all-visible">全部可见</span>
    </template>
    <appear-item
      :item="[{label: '分享渠道'}]"
      style="margin-bottom: 5px; margin-top: 15px;"
    >
    </appear-item>
    <div class="video-wrapper">
      {{shareMessage || '禁止分享'}}
    </div>
    <appear-item
      :item="[{label: '活动预算费用', value: data.budgetCost},
            {label: '活动实际费用', value: data.actualCost}]"
    ></appear-item>
    <appear-item
      :item="[{label: '活动礼品类型', value: data.giftType},
            {label: '礼品名称', value: data.giftName}]"
    ></appear-item>
    <appear-item
      :item="[{label: '礼品总金额', value: data.giftAmount},
            {label: '礼品数量', value: data.giftNum}]"
    ></appear-item>
    <appear-item
      :item="[{label: '礼品已发数量', value: data.giftSendNum},
            {label: '礼品剩余数量', value: data.giftSurplusNum}]"
    ></appear-item>
  </section>
</template>

<script>
  import EdForm from '@/components/ed-form.vue'
  import LrLayout from '@/components/LR-layout.vue'
  import AppearItem from '@/components/nb-detail/appear-item'
  import {formatDate, fieldArr} from '@/common/utils'
  export default {
    data () {
      return {
        name: '',
        data: this.detailData,
        faData: '',
        ifaData: '',
        customerData: ''
      }
    },
    props: {
      detailData: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      detailData (val) {
        this.data = this.detailData
      },
      data: 'handleData'
    },
    computed: {
      shareMessage () {
        let text = ''
        switch (this.data.shareConfigValue) {
          case 1:
            text = '微信'
            break
          case 2:
            text = '朋友圈'
            break
          case 4:
            text = 'QQ'
            break
          case 3:
            text = '微信,朋友圈'
            break
          case 5:
            text = '微信,QQ'
            break
          case 6:
            text = '朋友圈,QQ'
            break
          case 7:
            text = '微信,朋友圈,QQ'
            break
        }
        return (this.data.shareCfg !== 0) && text
      }
    },
    components: {
      EdForm,
      LrLayout,
      AppearItem
    },
    methods: {
      formatDate (value, pattern) {
        return formatDate(value, pattern)
      },
      handleData (data) {
        if (data.scope === -1) return
        if (data.scopeVo.customerScope === null) {
          this.customerData = fieldArr(data.scopeVo.customerTag, 'name').join(',')
        } else if (data.scopeVo.customerScope === -1) {
          this.customerData = '全部可见'
        } else {
          this.customerData = '全部不可见'
        }
        if (data.scopeVo.faScope === null) {
          let dept = fieldArr(data.scopeVo.faDept, 'name')
          let position = fieldArr(data.scopeVo.faPosition, 'name')
          let tag = fieldArr(data.scopeVo.faTag, 'name')
          let a = dept.concat(position, tag)
          this.faData = a.join(',')
        } else if (data.scopeVo.faScope === -1) {
          this.faData = '全部可见'
        }
        if (data.scopeVo.ifaScope === -1) {
          this.ifaData = '全部可见'
        } else {
          this.ifaData = '全部不可见'
        }
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.detail-tpl-wrapper{
  padding: 20px;
}
  .scope-show-wrapper{
    color: #333;
    font-size: 14px;
    .scope-wrapper{
      display: flex;
      margin-bottom: 10px;
      line-height: 140%;
      span{
        width: 100px;
        flex: 0 0 100px;
        display: block;
        color: #999;
        font-size: 13px;
      }
      p{
        flex: 1;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
.all-visible{
  font-size: 14px;
  color: #333;
  position: relative;
  top: -8px;
}
  .video-wrapper{
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
    div{
      line-height: 140%;
    }
  }
</style>
